import React, { Component } from 'react'
import PropTypes from 'prop-types';

export class TabTitle extends Component {
    render() {
        const { list, active, changeActive, addTab, delFn } = this.props;
        return (
            <div>
                {
                    list.length ?
                        list.map((item, index) => {
                            return <button key={item.id}
                                onClick={() => {
                                    changeActive(index)//高亮切换
                                }}
                                className={active === index ? "on" : ""}

                            >
                                <b>{item.title}</b>
                                <span onClick={(e) => {
                                    e.stopPropagation(); //阻止冒泡
                                    delFn(item.id) //删除
                                }}>X</span>
                            </button>
                           
                        }) : "暂无数据"
                }
                <button onClick={() => {
                    addTab()
                }}>+</button>
            </div>
        )
    }
}

// 校验参数类型
TabTitle.propTypes = {
    list: PropTypes.array,
    changeActive: PropTypes.func.isRequired,
    addTab: PropTypes.func.isRequired,
    delFn: PropTypes.func.isRequired,


};

// 设置默认值 
TabTitle.defaultProps = {
    list: []
};


export default TabTitle